import React from 'react';
import HolyGrailLayout from '../components/HolyGrailLayout';
import LeftSidebar from '../components/LeftSidebar';
import Navigation from '../components/Navigation';

interface ImageProps {}

const Image: React.FC<ImageProps> = () => {
  const mainContent = (
    <div className="main-content">
      <article className="hero-section">
        <h1>CSS 图片处理</h1>
        <p className="hero-subtitle">
          图片样式、滤镜效果和响应式图片技巧
        </p>
      </article>

      <section className="image-examples">
        <h2>图片样式示例</h2>
        <div className="examples-grid">
          <div className="example-card">
            <h3>基础样式</h3>
            <div className="demo-box">
              <div className="image-demo">
                <div className="image-placeholder">图片占位符</div>
              </div>
            </div>
            <p>圆角、阴影、边框等基础样式</p>
          </div>

          <div className="example-card">
            <h3>滤镜效果</h3>
            <div className="demo-box">
              <div className="filter-demo">
                <div className="filter-item grayscale">灰度</div>
                <div className="filter-item blur">模糊</div>
                <div className="filter-item brightness">亮度</div>
                <div className="filter-item contrast">对比度</div>
              </div>
            </div>
            <p>各种CSS滤镜效果</p>
          </div>

          <div className="example-card">
            <h3>悬停效果</h3>
            <div className="demo-box">
              <div className="hover-demo">
                <div className="hover-item scale">缩放</div>
                <div className="hover-item rotate">旋转</div>
                <div className="hover-item flip">翻转</div>
                <div className="hover-item glow">发光</div>
              </div>
            </div>
            <p>鼠标悬停时的动画效果</p>
          </div>

          <div className="example-card">
            <h3>响应式图片</h3>
            <div className="demo-box">
              <div className="responsive-demo">
                <div className="responsive-image">自适应图片</div>
              </div>
            </div>
            <p>适配不同屏幕尺寸的图片</p>
          </div>
        </div>
      </section>

      <section className="image-tips">
        <h2>图片优化技巧</h2>
        <div className="tips-grid">
          <div className="tip-card">
            <h4>📸 图片格式</h4>
            <ul>
              <li>WebP 格式提供更好的压缩率</li>
              <li>AVIF 是最新的高效格式</li>
              <li>SVG 适合图标和简单图形</li>
            </ul>
          </div>
          
          <div className="tip-card">
            <h4>⚡ 加载优化</h4>
            <ul>
              <li>使用懒加载减少初始加载时间</li>
              <li>预加载关键图片资源</li>
              <li>使用图片压缩工具减小文件大小</li>
            </ul>
          </div>

          <div className="tip-card">
            <h4>📱 响应式处理</h4>
            <ul>
              <li>使用 srcset 提供不同尺寸图片</li>
              <li>使用 picture 元素适配不同设备</li>
              <li>考虑高分辨率屏幕的显示效果</li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  );

  const header = (
    <div className="site-header">
      <div className="header-content">
        <div className="header-top">
          <h1 className="site-title">CSS 图片处理</h1>
          <p className="site-description">图片样式和优化技巧</p>
        </div>
        <Navigation />
      </div>
    </div>
  );

  const footer = (
    <div className="site-footer">
      <div className="footer-content">
        <p>&copy; 2025 刘春生个人整理. 专注于前端技术分享</p>
        <div className="footer-links">
          <a href="#">关于我</a>
          <a href="#">联系方式</a>
          <a href="#">RSS订阅</a>
        </div>
      </div>
    </div>
  );

  return (
    <HolyGrailLayout
      header={header}
      leftSidebar={<LeftSidebar />}
      mainContent={mainContent}
      footer={footer}
    />
  );
};

export default Image;
